import { useNavigate } from 'react-router-dom';
import { NavBar } from 'react-vant'
import '../../sass/PersonalMsg.scss'

function PersonalMsg() {

    let navigate = useNavigate()

    let menuData = ['头像','用户id','手机号','昵称','简介']

    let goToDetail = (index) => {
        if (index==0) {
            navigate('/PersonalMsg')
        }else if (index==1) {
            navigate('/MyTicket')
        }else if (index==2) {
            navigate('/MyCollected')
        }else if (index==3) {
            navigate('/AddressEdit')
        }else if (index==4) {
            navigate('/SafeCenter')
        }
    }

    return (
        <div className="personal-msg">
            <NavBar
                title="个人资料"
                leftText="返回"
                onClickLeft={() => navigate(-1)}
            />
            <div className="top-img"></div>
            <div className="menu">
                <div className="menu-content">
                    {
                        menuData.map((item,index) => {
                            return (
                                <div className="menu-content-list" key={index} onClick={() => {goToDetail(index)}}>
                                    <div className="title">{item}</div>
                                    <div className={index!=4&&index!=0?'right':index==0?'user-img':'text-left'}>112</div>
                                </div>
                            )
                        })
                    }
                    
                </div>
            </div>
        </div>
    )
}
export default PersonalMsg;